<template>
    <div class="UserLayout">
        <div>
            <a-dropdown>
                <div>
                    <a-avatar>
                        <template #icon>
                            <UserOutlined />
                        </template>
                    </a-avatar>
                    <span class="username" :class="Logout">{{ NickName }}</span>
                </div>
                <template #overlay>
                    <a-menu>
                        <a-menu-item>
                            <a href="javascript:;" @click="visible = true">修改密码</a>
                        </a-menu-item>
                    </a-menu>
                </template>
            </a-dropdown>
        </div>
        <a-popconfirm placement="bottomRight" @confirm="Logout">
            <template #title>
                <div style="width:140px">是否退出登录?</div>
            </template>
            <LogoutOutlined class="logout" />
        </a-popconfirm>
    </div>
    <a-modal v-model:visible="visible" title="修改密码" @ok="handleOk" :maskClosable="false" destroyOnClose :confirmLoading="loading">
        <ResetPasswordVue ref="RPassword" @LogOut="LogoutByRePassword" @ClearLoading="ClearLoading" />
    </a-modal>
</template>
<script lang="ts" setup>
import { UserOutlined, LogoutOutlined } from '@ant-design/icons-vue'
import { useStorage } from '@vueuse/core';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import ResetPasswordVue from './ResetPassword.vue';
import { notification } from 'ant-design-vue'

const router = useRouter();
const Token = useStorage('token', '', localStorage);
const Permission = useStorage('permission', '', localStorage);
const NickName = useStorage('NickName', '', localStorage);
function Logout() {
    Token.value = null;
    Permission.value = null;
    NickName.value = null;
    router.push('/login');
    window.location.reload();
}
const RPassword = ref();
const visible = ref<boolean>(false);

const loading = ref<boolean>(false);

const handleOk = () => {
    loading.value = true;
    RPassword.value.ResetPassword();
};

const ClearLoading = () => {
    loading.value = false;
}

const LogoutByRePassword = () => {
    notification.success({ message: '修改密码成功，请重新登录' });
    setTimeout(() => {
        Logout();
    }, 2000)
}

</script>
<style lang="less" scoped>
.UserLayout {
    float: right;
    color: #e0e0e0;
    padding-right: 10px;
    display: flex;

    .username {
        padding: 0 10px;
        vertical-align: middle;
    }

    .logout {
        font-size: 20px;
        vertical-align: middle;
        margin-left: 10px;
        cursor: pointer;
        opacity: 0.7;
        padding: 23px 10px;

        &:hover {
            opacity: 1;
        }
    }

    .Setting {
        float: left;
        opacity: 0.9;
        cursor: pointer;
        padding-right: 10px;

        &:hover {
            opacity: 1;
        }
    }
}
</style>